<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>精进智能</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.3/style/weui.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.1/css/jquery-weui.min.css">
</head>
<body ontouchstart>
<header class="demos-header">
    <h1 class="demos-title">停车记录</h1>
</header>
<div class="page__bd">
    <div id="list">
        <div class="weui-panel">
            <div class="weui-panel__hd">湘江世纪城</div>
            <div class="weui-panel__bd">
                <div class="weui-media-box weui-media-box_text">
                    <h4 class="weui-media-box__title">我的加</h4>
                    <h5 class="weui-media-box__desc" style="float: right; color: red">¥110元</h5>
                    <p class="weui-media-box__desc">2018年9月11日<span>21：11：12</span></p>
                    <p class="weui-media-box__desc">2018年9月11日<span>22：32：12</span></p>
                    <ul class="weui-media-box__info">
                        <li class="weui-media-box__info__meta"><i style="background: #0d8ddb">i</i> 停车时长</li>
                        <li class="weui-media-box__info__meta">2小时9分钟</li>
                        <li class="weui-media-box__info__meta weui-media-box__info__meta_extra">其它信息</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="weui-panel">
            <div class="weui-panel__hd">湘江世纪城</div>
            <div class="weui-panel__bd">
                <div class="weui-media-box weui-media-box_text">
                    <h4 class="weui-media-box__title">我的加</h4>
                    <h5 class="weui-media-box__desc" style="float: right; color: red">¥110元</h5>
                    <p class="weui-media-box__desc">2018年9月11日<span>21：11：12</span></p>
                    <p class="weui-media-box__desc">2018年9月11日<span>22：32：12</span></p>
                    <ul class="weui-media-box__info">
                        <li class="weui-media-box__info__meta"><i style="background: #0d8ddb">i</i> 停车时长</li>
                        <li class="weui-media-box__info__meta">2小时9分钟</li>
                        <li class="weui-media-box__info__meta weui-media-box__info__meta_extra">其它信息</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="weui-panel">
            <div class="weui-panel__hd">湘江世纪城</div>
            <div class="weui-panel__bd">
                <div class="weui-media-box weui-media-box_text">
                    <h4 class="weui-media-box__title">我的加</h4>
                    <h5 class="weui-media-box__desc" style="float: right; color: red">¥110元</h5>
                    <p class="weui-media-box__desc">2018年9月11日<span>21：11：12</span></p>
                    <p class="weui-media-box__desc">2018年9月11日<span>22：32：12</span></p>
                    <ul class="weui-media-box__info">
                        <li class="weui-media-box__info__meta"><i style="background: #0d8ddb">i</i> 停车时长</li>
                        <li class="weui-media-box__info__meta">2小时9分钟</li>
                        <li class="weui-media-box__info__meta weui-media-box__info__meta_extra">其它信息</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="weui-panel">
            <div class="weui-panel__hd">湘江世纪城</div>
            <div class="weui-panel__bd">
                <div class="weui-media-box weui-media-box_text">
                    <h4 class="weui-media-box__title">我的加</h4>
                    <h5 class="weui-media-box__desc" style="float: right; color: red">¥110元</h5>
                    <p class="weui-media-box__desc">2018年9月11日<span>21：11：12</span></p>
                    <p class="weui-media-box__desc">2018年9月11日<span>22：32：12</span></p>
                    <ul class="weui-media-box__info">
                        <li class="weui-media-box__info__meta"><i style="background: #0d8ddb">i</i> 停车时长</li>
                        <li class="weui-media-box__info__meta">2小时9分钟</li>
                        <li class="weui-media-box__info__meta weui-media-box__info__meta_extra">其它信息</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="weui-loadmore">
        <i class="weui-loading"></i>
        <span class="weui-loadmore__tips">正在加载</span>
    </div>
</div>
<style>
    .weui-footer {
        margin: 25px 0 10px 0;
        position: fixed;
        bottom: .52em;
        left: 0;
        right: 0;
    }

    .demos-title {
        text-align: center;
        font-size: 34px;
        color: #3cc51f;
        font-weight: 400;
        margin: 0 15%;
    }

    .demos-sub-title {
        text-align: center;
        color: #888;
        font-size: 14px;
    }

    .demos-header {
        padding: 35px 0;
    }
</style>
<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/jquery-weui.min.js"></script>
<script src="/js/mobile/fastclick.js"></script>
<script>
    $(function () {
        FastClick.attach(document.body);
    });
</script>
<script>
    var loading = false;
    $(document.body).infinite().on("infinite", function () {
        if (loading) return;
        loading = true;
        setTimeout(function () {
            $("#list").append("    <div class=\"weui-panel\">\n" +
                "        <div class=\"weui-panel__hd\">浪琴湾</div>\n" +
                "        <div class=\"weui-panel__bd\">\n" +
                "            <div class=\"weui-media-box weui-media-box_text\">\n" +
                "                <h4 class=\"weui-media-box__title\">我的22222</h4>\n" +
                "                <h5 class=\"weui-media-box__desc\" style=\"float: right; color: red\">¥1120元</h5>\n" +
                "                <p class=\"weui-media-box__desc\">2018年9月12日<span>21：11：12</span></p>\n" +
                "                <p class=\"weui-media-box__desc\">2018年9月13日<span>22：32：12</span></p>\n" +
                "                <ul class=\"weui-media-box__info\">\n" +
                "                    <li class=\"weui-media-box__info__meta\"><i style=\"background: #0d8ddb\">i</i> 停车时长</li>\n" +
                "                    <li class=\"weui-media-box__info__meta\">12小时9分钟</li>\n" +
                "                    <li class=\"weui-media-box__info__meta weui-media-box__info__meta_extra\">其它信息</li>\n" +
                "                </ul>\n" +
                "            </div>\n" +
                "        </div>\n" +
                "    </div>");
            loading = false;
            $(document.body).destroyInfinite();
            $(".weui-loadmore").hide();
        }, 2000);
    });
</script>
</body>
</html>

<!--如果你不需要滚动加载了，比如已经加载完了所有内容，调用 $(document.body).destroyInfinite() 可以销毁插件。-->
<!--之后你可以再次调用 $(document.body).infinite() 来重新初始化.-->